<template>
    <div class="main_box" style="padding:10px">
      <div class="add_wrap">
        <div class="tit">
          <h2>{{dataForm.communityId?'编辑社区信息':'新增社区'}}</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
          <el-row>
            <el-form-item label="社区" width="300" align="center" prop="communityName">
              <el-input v-model="dataForm.communityName" placeholder="请输入社区名称"></el-input>
            </el-form-item>

            <el-form-item label="地区" prop="streetIds">
              <Region
                :streetValues="dataForm.streetIds"
                @regionChange="handleItemChange"
                :isChangeOnSelect="true"
              ></Region>
            </el-form-item>
            <el-form-item label="小区" prop="villageIds">
                <el-select v-model="dataForm.villageIds" multiple placeholder="请选择小区">
                    <el-option v-for="item in villageList" :value="item.id" :label="item.name" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="dataForm.address" placeholder="xx路xx号xx栋"></el-input>
            </el-form-item>
            <el-form-item label="经度" prop="longitude">
              <el-input type="number" v-model="dataForm.longitude"></el-input>
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
              <el-input type="number" v-model="dataForm.latitude"></el-input>
              <el-button type="text" @click="getLngLat(1)">百度地图</el-button>
              <el-button type="text" @click="getLngLat(2)">腾讯地图</el-button>
            </el-form-item>
            <el-form-item label="联系人" prop="linkName">
                <el-input v-model="dataForm.linkName"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="linkPhone">
                <el-input v-model.number="dataForm.linkPhone"></el-input>
            </el-form-item>
            <el-form-item label="备用电话" prop="linkPhoneTwo">
                <el-input v-model.number="dataForm.linkPhoneTwo" prop="linkPhoneTwo"></el-input>
            </el-form-item>
            <el-form-item label="排序(正序)" align="center" prop="sort">
              <el-input type="number" v-model.number="dataForm.sort" placeholder="社区显示优先级"></el-input>
            </el-form-item>
            <el-form-item label="链接小程序码url" align="center" prop="linkWxAppUrl">
              <el-input v-model="dataForm.linkWxAppUrl"></el-input>
            </el-form-item>
            <el-form-item label="社区简介" align="center" prop="introduce">
              <el-input type="textarea" v-model.number="dataForm.introduce"></el-input>
            </el-form-item>
            <el-form-item label="备注" align="center" prop="remark">
              <el-input type="textarea" v-model.number="dataForm.remark"></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item>
              <el-button plain type="primary" @click="sureClick">保 存</el-button>
              <el-button plain @click="returnList">取 消</el-button>
            </el-form-item>
          </el-row>
        </el-form>

      </div>
    </div>
  </template>

  <script>
    import * as message from "@/constants/message";
    import Region from "@/components/Region";
    import CommunityApi from '@/api/address/community';
    import VillageApi from "@/api/address/village"
    export default {
      data() {
        return {
          dataForm: {
            communityId: "",
            communityName: "",
            longitude: "",
            latitude: "",
            streetIds: [],
            provinceId: "",
            provinceName: "",
            cityId: "",
            cityName: "",
            areaId: "",
            areaName: "",
            streetId: '',
            streetName: '',
            address: '',
            linkPhone:"",
            linkPhoneTwo:"",
            linkName:"",
            sort:"",
            linkWxAppUrl:"",
            introduce:"",
            villageIds:[],
            remark:"",
          },
          loadingIns: false,
          villageList:null,
          roleRules: {
            streetIds: [
              {required: true, message: "请选择所在地区", trigger: "change"}
            ],
            villageIds:[
                {required: true, message: "请选择小区", trigger: "change"}
            ],
            communityName: [
              {required: true, message: "请输入社区名称", trigger: "blur"}
            ],
            address: [
              {required: true, message: "请输入详细地址", trigger: "blur"}
            ],
            linkPhone: [
              {pattern: /^400[0-9]{7}|^1[345789]\d{9}$|^0[0-9]{2,3}-[0-9]{8}/, message: "联系电话格式错误", trigger: "blur"}
            ],
            linkPhoneTwo: [
              {pattern: /^400[0-9]{7}|^1[345789]\d{9}$|^0[0-9]{2,3}-[0-9]{8}/, message: "备用联系电话格式错误", trigger: "blur"}
            ],
            longitude:[
             {required: true, message: "请输入经度", trigger: "blur"}
            ],
            latitude:[
              {required:true,message:"请输入维度",trigger:"blur"}
            ]

          },
        }
      },
      components: {
        Region
      },
      mounted() {
        this.init()
      },
      methods: {
        init() {
          if (this.$route.query.id) {
            this.dataForm.communityId = this.$route.query.id
            this.getData()
          }
        },
        keydown(e) {
          if (e.keyCode == 32) {
            e.returnValue = false;
          }
        },
        getLngLat(type) {
          if (type == 1){
            window.open("https://api.map.baidu.com/lbsapi/getpoint/index.html", "_blank")
          }else{
            window.open("https://lbs.qq.com/getPoint", "_blank")
          }
        },
        async getVillageList(){
            const [provinceId,cityId,areaId,streetId] = this.dataForm.streetIds.filter(item=>Number(item))
            console.log(this.dataForm.streetIds)
            let params = {
                provinceId,
                cityId,
                areaId,
                streetId,
                name:"",
            }
            const {data} = await VillageApi.villageList(params)
            this.villageList = data||[]
        },
        getData() {
          CommunityApi.getCommunityInfo({
            id: this.dataForm.communityId
          }).then(res => {
            res.data.villages&&(res.data.villageIds = res.data.villages.map(item=>item.id))
            this.$Utils.bindingBean(this.dataForm, res.data)
            // 传过来的是字符串需要分割为数组且要化为数字
            this.dataForm.streetIds = [
              this.dataForm.provinceId,
              this.dataForm.provinceName,
              this.dataForm.cityId,
              this.dataForm.cityName,
              this.dataForm.areaId,
              this.dataForm.areaName,
              this.dataForm.streetId,
              this.dataForm.streetName,
            ];
            this.getVillageList()
          })
        },
        sureClick() {
          this.$refs.dataForm.validate(valid => {
            if (valid) {

              // 需要判断地区是否是三级或者四级，如果不是就不许提交
              let value = this.dataForm.streetIds
              for (let i = 0; i < value.length; i++) {
                if (value[i]) {
                  continue
                } else if (i < 3) {
                  this.$message.error("地区至少选至三级")
                  return
                }

              }
              this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
                .then(() => {
                  if (this.dataForm.communityId) {
                    this.editData();
                  } else {
                    this.addData();
                  }
                });
            }
          })
        },
        addData() {
          let param = {
            communityName: this.dataForm.communityName,
            sort: this.dataForm.sort,
            longitude: this.dataForm.longitude,
            latitude: this.dataForm.latitude,
            provinceId: this.dataForm.provinceId,
            provinceName: this.dataForm.provinceName,
            cityId: this.dataForm.cityId,
            cityName: this.dataForm.cityName,
            areaId: this.dataForm.areaId,
            areaName: this.dataForm.areaName,
            streetId: this.dataForm.streetId,
            streetName: this.dataForm.streetName,
            address: this.dataForm.address,
            linkName:this.dataForm.linkName,
            linkPhone:this.dataForm.linkPhone,
            linkPhoneTwo:this.dataForm.linkPhoneTwo,
            linkWxAppUrl:this.dataForm.linkWxAppUrl,
            introduce:this.dataForm.introduce,
            villageIds:this.dataForm.villageIds,
            remark:this.dataForm.remark,
          };
          CommunityApi.addCommunity(param).then(res => {
            this.$Utils.notifySuccess()
            this.returnList();
          })
        },
        editData() {
          let param = {
            communityId: this.dataForm.communityId,
            communityName: this.dataForm.communityName,
            sort: this.dataForm.sort,
            longitude: this.dataForm.longitude,
            latitude: this.dataForm.latitude,
            provinceId: this.dataForm.provinceId,
            provinceName: this.dataForm.provinceName,
            cityId: this.dataForm.cityId,
            cityName: this.dataForm.cityName,
            areaId: this.dataForm.areaId,
            areaName: this.dataForm.areaName,
            streetId: this.dataForm.streetId,
            streetName: this.dataForm.streetName,
            address: this.dataForm.address,
            linkName:this.dataForm.linkName,
            linkPhone:this.dataForm.linkPhone,
            linkPhoneTwo:this.dataForm.linkPhoneTwo,
            linkWxAppUrl:this.dataForm.linkWxAppUrl,
            introduce:this.dataForm.introduce,
            villageIds:this.dataForm.villageIds,
            remark:this.dataForm.remark,
          };
          CommunityApi.editCommunity(param)
            .then(data => {
              this.$Utils.notifySuccess()
              this.returnList();
            })
        },
        handleItemChange(val) {
          this.dataForm.provinceId = val.provinceId;
          this.dataForm.provinceName = val.provinceName;
          this.dataForm.cityId = val.cityId;
          this.dataForm.cityName = val.cityName;
          this.dataForm.areaId = val.areaId;
          this.dataForm.areaName = val.areaName;
          this.dataForm.streetId = val.streetId
          this.dataForm.streetName = val.streetName
          this.dataForm.villageIds = []
          this.villageList = []
          if (val.provinceId) {
            this.dataForm.streetIds = [val.provinceId, val.cityId, val.areaId, val.streetId];
            this.getVillageList()
          } else {
            this.dataForm.streetIds = []
          }
        },
        returnList() {
          this.$store.dispatch('delView', this.$route);
          this.$router.back()
        }
      },

    }
  </script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
